<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>软件工程</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <link rel="stylesheet" href="/static/css/subCase.css">
    <script type="text/javascript" src="/static/js/index.js"></script>

    <style>

        /*主体制作*/

        .leftBox {
            float: left;
            width: 330px;
            height: 1400px;
        }

        .dt {
            width: 330px;
            height: 40px;
            font-size: 18px;
            text-align: center;
            padding-top: 16px;
        }

        .rightBox {
            float: left;
            width: 1100px;
            height: 1400px;
            background-color: ivory;
            margin-top: 21px;
        }

        .dd {
            height: 200px;
            width: 250px;
            float: left;
        }

        .dd ul li a {
            display: block;
            width: 300px;
            height: 40px;
            background-color: #b2c4b2;
            font-size: 16px;
            text-decoration: none;
            padding-left: 90px;
            line-height: 40px;
        }


        .dd ul li ul li {
            list-style-type: none;
            margin-left: 40px;
        }

        .dd ul li a:hover {
            background-color: #7e8770;
        / / 鼠标经过背景变色
        }

        .dd ul li ul {
            display: none;
        }

        .dd ul li {
            list-style-type: none;
            margin-left: -40px;
        }

        .dd ul li:hover ul {
            display: block;
        }

        .current :hover li {
            display: block;
        }

        .current li {
            height: 50px;
            width: 300px;
            text-align: center;
            line-height: 50px;
        }

        .current li:hover {
            background-color: darkolivegreen;
        / / 鼠标经过背景变色
        }

        .rightBox h1 {
            height: 70px;
            border-bottom: 1px dotted #cccccc;
            font-size: 25px;
            font-weight: 400;
            line-height: 70px;
            padding-left: 40px;
        }

        .rightBox ul li {
            font-size: 20px;
            height: 35px;
            line-height: 35px;
            padding-left: 100px;
        }

        .rightBox ul {
            margin-top: 40px;
        }


        .itemOne p {
            line-height: 25px;
        / / 行高设置 text-indent: 2 em;
        / / 每段（p标签）首行缩进
        }

        .itemOne h4 {
            line-height: 25px;
        / / 行高设置 text-indent: 2 em;
        / / 每段（p标签）首行缩进
        }




    </style>

</head>
<body>
<div class="header">
    <div class="topBar" onmouseleave="closePersonContr(); closeSearch()">
        {{template "head-left.html"}}

        <div class="loginInfo">
            {{if .user}}
                <div id="user" style="margin-right: 50px" onmouseenter="showPersonContr()">{{.user.Name}}</div>
            {{else}}
                <a href="/login">登录</a>
                <a href="/register" class="register">立即注册</a>
            {{end}}
            <div id="personShow">
                {{if .user}}
                    {{if ne .user.Level "1"}}
                        <a href="/admin" style="width:80px;">管理员</a>
                    {{end}}
                    <a href="/exit" style="width: 80px; ">个人信息</a>
                    <a href="/exit" style="width: 80px;">退出</a>
                {{end}}
            </div>


        </div>
    </div>
</div>
<div class="bigBox">
    <div class="leftBox" style="margin: auto;">
        <div class="dt">子案例</div>
        <div class="dd" style="margin-left: 55px">
            <ul>
                {{range $subcase := .subcases}}
                    <li id="case1" class="case" style="">
                        &emsp;<span id="case{{$subcase.Id}}Name"> {{$subcase.Name}}</span>
                        <ul class="current" id="subOne">
                            <li onclick="showContent1('1','index{{$subcase.Id}}')">案例简介</li>
                            <li onclick="showContent1('2','index{{$subcase.Id}}')">技术准备</li>
                            <li onclick="showContent1('3','index{{$subcase.Id}}')">开发流程</li>
                            <li onclick="showContent1('4','index{{$subcase.Id}}')">界面展示</li>
                        </ul>
                    </li>
                {{end}}

            </ul>
        </div>
    </div>
    <div class="rightBox" style="margin: auto">
        <div id="addContent" style="display: none" onmouseleave="leave()">
        </div>
        {{range $subcase := .subcases}}
            <div class="leftContent index{{$subcase.Id}}" style="display: none;margin-top:50px">
                <div class="edit" id="case{{$subcase.Id}}-textarea1">{{$subcase.Abstract}}</div>
            </div>
            <div class="leftContent index{{$subcase.Id}}" style="display: none;margin-top:50px">
                <div class="edit"
                     id="case{{$subcase.Id}}-textarea2">{{$subcase.TechPrepare}}</div>
            </div>
            <div class="leftContent index{{$subcase.Id}}" style="display: none;margin-top:50px">
                <div class="edit" id="case{{$subcase.Id}}-textarea3">{{$subcase.Process}}</div>
            </div>
            <div class="leftContent index{{$subcase.Id}}" style=" display: none; border: none">
                <div id="case{{$subcase.Id}}-img"
                     style="position:relative;top: 20px;width: 798px;height:500px;overflow: auto">
                    {{range $index,$subImg := $.subImgPat}}
                        {{if eq $index $subcase.Id}}
                            {{range $path := $subImg}}
                                <img src="/{{$path}}" width="798" height="500">
                            {{end}}
                        {{end}}
                    {{end}}
                </div>
            </div>

        {{end}}
    </div>
</div>

<script type="text/javascript" src="/static/js/subCase.js"></script>

</body>
</html>